<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col-auto">
        <span class="status-indicator status-green status-indicator-animated">
          <span class="status-indicator-circle"></span>
          <span class="status-indicator-circle"></span>
          <span class="status-indicator-circle"></span>
        </span>
      </div>
      <div class="col-8">
        <input type="text" style="display: none;" id="job-details-id" />
        <!-- 页面标题 -->
        <h2 class="page-title" id="job-details-title">
          <!-- 零售云技术专家／高级开发工程师 -->
        </h2>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
      <!-- 报价 -->
      <div class="col-md-6 col-xl-3">
        <div class="card card-sm">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <span class="bg-primary text-white avatar">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-currency-yen icon" viewBox="0 0 16 16">
                    <path d="M8.75 14v-2.629h2.446v-.967H8.75v-1.31h2.445v-.967H9.128L12.5 2h-1.699L8.047 7.327h-.086L5.207 2H3.5l3.363 6.127H4.778v.968H7.25v1.31H4.78v.966h2.47V14h1.502z"/>
                  </svg>
                </span>
              </div>
              <div class="col">
                <div class="font-weight-medium">
                  <h3 id="job-details-price">
                    <!-- 3000 - 5000 -->
                  </h3>
                </div>
                <div class="text-muted">
                  报价
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 有效期 -->
      <div class="col-md-6 col-xl-3">
        <div class="card card-sm">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <span class="bg-green text-white avatar">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
                    <path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                    <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
                  </svg>
                </span>
              </div>
              <div class="col">
                <div class="font-weight-medium">
                  <h3 id="job-details-expires">
                    <!-- 2024-12-31 -->
                  </h3>
                </div>
                <div class="text-muted">
                  有效期
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 收藏数 -->
      <div class="col-md-6 col-xl-3">
        <div class="card card-sm">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <span class="bg-red text-white avatar">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star icon" viewBox="0 0 16 16">
                    <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
                  </svg>
                </span>
              </div>
              <div class="col">
                <div class="font-weight-medium">
                  <h3 id="job-details-favorite-count">
                    <!-- 1352 -->
                  </h3>
                </div>
                <div class="text-muted">
                  收藏数
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 访问数 -->
      <div class="col-md-6 col-xl-3">
        <div class="card card-sm">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <span class="bg-yellow text-white avatar">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people icon" viewBox="0 0 16 16">
                    <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
                  </svg>
                </span>
              </div>
              <div class="col">
                <div class="font-weight-medium">
                  <h3 id="job-details-visit-count">
                    <!-- 100058 -->
                  </h3>
                </div>
                <div class="text-muted">
                  访问量
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 职位描述 -->
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <div class="col-auto">
              <!-- <h3 class="card-title">职位描述</h3> -->
              <div class="row g-2 align-items-center">
                <div class="col-auto">
                  <span class="avatar avatar-lg" id="job-details-publisher-avatar"></span>
                </div>
                <div class="col">
                  <h4 class="card-title m-0" id="job-details-publisher-name">
                    <!-- 小比特 -->
                  </h4>
                  <div class="text-muted" id="job-details-major">
                    <!-- 计算机科学系 -->
                  </div>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="btn-list justify-content-end">
                <a href="javascript:void(0);" class="btn btn-danger" id="job-details-favorite-btn">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572">
                    </path>
                  </svg>
                  感兴趣
                </a>
                <a href="javascript:void(0);" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-send-resume">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-send"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14l11 -11"></path><path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"></path></svg>
                  投简历
                </a>
              </div>
            </div>
          </div>
          <div class="card-body" id="job-details-description">
            <!-- 帖子正文开始 -->
            
          </div>
        </div>
      </div>
      <!-- 职位信息结束 -->
    </div>
  </div>
</div>

<!-- 确认投递简历模态框 -->
<div class="modal modal-blur fade" id="modal-send-resume" tabindex="-1" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-yellow"></div>
      <div class="modal-body text-center py-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-patch-question icon mb-2 text-yellow icon-lg" viewBox="0 0 16 16">
          <path d="M8.05 9.6c.336 0 .504-.24.554-.627.04-.534.198-.815.847-1.26.673-.475 1.049-1.09 1.049-1.986 0-1.325-.92-2.227-2.262-2.227-1.02 0-1.792.492-2.1 1.29A1.71 1.71 0 0 0 6 5.48c0 .393.203.64.545.64.272 0 .455-.147.564-.51.158-.592.525-.915 1.074-.915.61 0 1.03.446 1.03 1.084 0 .563-.208.885-.822 1.325-.619.433-.926.914-.926 1.64v.111c0 .428.208.745.585.745z"/>
          <path d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911l-1.318.016z"/>
          <path d="M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0z"/>
        </svg>
        <h3>确定要投递简历吗？</h3>
        <div class="text-muted">点击确认您的简历将发送给职位发布者.</div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <div class="row">
            <div class="col"><a href="javascript:void(0);" class="btn w-100" data-bs-dismiss="modal">
              取消
              </a></div>
            <div class="col"><a href="javascript:void(0);" class="btn btn-yellow w-100" data-bs-dismiss="modal" id="job-details-send-resume-confirm-btn">
              确定
              </a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
$(function() {
  // 获取用户信息
  $.ajax({
    type : 'get', 
    url : 'job/details?id=' + currentJobId,
    contentType : 'application/x-www-form-urlencoded',
    success : function (respData) {
      if (respData.code != 0) {
        // 提示
        $.toast({
          heading: '提示',
          text: respData.message,
          icon: 'info'
        });
        return;
      }
      // 初始化页面
      initJobDetail(respData.data);
    }
  });

  // 初始化页面内容
  function initJobDetail(job) {
    // id
    $('#job-details-id').val(job.id);
    // 标题
    $('#job-details-title').html(job.title);
    // 报价
    let priceHtml;
    if (!job.rewardLower || !job.rewardUpper) {
      priceHtml = '<strong>薪资面议</strong>'
    } else {
      priceHtml = ' <strong>' + job.rewardLower + '</strong> - <strong>' + job.rewardUpper + '</strong> '
    }
    $('#job-details-price').html(priceHtml);
    // 有效期
    $('#job-details-expires').html(job.expires);
    // 收藏数
    $('#job-details-favorite-count').html(job.favoriteCount);
    // 访问数
    $('#job-details-visit-count').html(job.visitCount);
    // 发布者头像
    if (!job.publisher.avatarUrl) {
      job.publisher.avatarUrl = avatarUrl;
    }
    $('#job-details-publisher-avatar').css('background-image', 'url(' + job.publisher.avatarUrl + ')');
    // 发布者姓名
    $('#job-details-publisher-name').html(job.publisher.name);
    // 发布者专业
    $('#job-details-major').html(job.publisher.major.name);
    // 正文
    editormd.markdownToHTML('job-details-description', { markdown: job.description });
  }

  // 绑定事件
  // 收藏
  $('#job-details-favorite-btn').click(function() {
    let jobId = $('#job-details-id').val();
    $.ajax({
      type: 'put',
      url : 'favorite/add/' + jobId,
      contentType: 'application/x-www-form-urlencoded',
      success : function (respData) {
        if (respData.code == 0) {
          // 提示
          $.toast({
            heading: '提示',
            text: '收藏成功, 请在个人中心中查看',
            icon: 'success'
          });
        } else {
          // 提示
          $.toast({
            heading: '提示',
            text: respData.message,
            icon: 'info'
          });
        }
      }
    });
  });

  // 投递
  $('#job-details-send-resume-confirm-btn').click(function () {
    let jobId = $('#job-details-id').val();
    // 构造数据
    let sendData = {
      jobId : jobId
    };
    // 发送AJAX请求
    $.ajax({
      type : 'post',
      url : '/deliver/add',
      contentType: 'application/x-www-form-urlencoded',
      data : sendData,
      success : function (respData) {
        if (respData.code == 0) {
          // 提示
          $.toast({
            heading: '提示',
            text: '投递成功，请在个人中心中跟进.',
            icon: 'success'
          });
        } else {
          $.toast({
            heading: '失败',
            text: respData.message,
            icon: 'info'
          });
        }
      }
    });
  });
});
</script>